<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Axios练习</title>
	</head>
	<body>
		
		<script src="../js/axios.js"></script>
		<script>
		//编辑远程Ajax的请求
		/* 1.promise对象解决传统ajax中回调地狱的问题
		   2.Axios封装了promise对象，异步调用更加简洁
		   3.常见的请求类型1，get(查) post(form表单提交) put(该)  delete(删除)
		   4，分组;用法相同 get/delete  post/put
		   5.注意事项》默认条件下浏览器只能发发起get请求
		 */
		/* 1.Axios 入门案例- get请求
		 原始方式。1.url 地址    请求参数   回调函数
		 axios方式    参数：url  请求参数
		 关键字  then(回调函数) 
		 */
		//let data=''
		axios.get("http://localhost:8090/users/findAll")
		     .then(function(result){
				 //result 返回的是一个promis对象
				 console.log(result)
				 //想要动态获取服务器的数据返回值使用result.data
				 console.log(result.data)
			 } )
		
		//箭头函数的用法 参数只有一个能省略括号
		axios.get("http://localhost:8090/users/findAll")
		.then(result=>{
			console.log(result.data)
			
		} )
		
		/* 3.带参数的请求方式  字符串拼接
		 需求：查询id=100的用户数据
		 */
		axios.get("http://localhost:8090/users/gteUserId?id=1")
		.then(result=>{
			console.log(result.data)
		} )
		
		/*  对象的请求方式（重点）
		   如果ajax请求的参数有多个，采用字符串的方式，效率太低
		   所有采用对象的方式提交
		*/
		  // 需求：查询数据库name=大乔 sex=女 采用params关键字来传递对象给后端	
		   
	   // 封装对象 
	   let user={
		   name: '大乔',
		   sex: '女'
		   
	   }
	   //传对象的语法结构
	   axios.get("http://localhost:8090/users/getByNs",{
		//关键字 params
		   params: user
	   })
	   .then(result=>{
		   console.log(result.data)
		   
	   } )
		/* 	
		 要求.利用restful 风格 实现name 属性的修改
		 
		 
		    查询
		 
		      将id=1的name改为  ‘守山使者黑熊金’
		 */
		
		axios.get("http://localhost:8090/users/user/君")
		     .then(result=>{
		     		   console.log(result.data)
		     		   
		     } )
		
		
		</script>
	</body>
</html>
